<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
    <style>
        *{
            padding: 0; 
            margin: 0;
        }
        .wrap{
            width: 500px;
            height: 500px;
            background: #ccd;
            display: flex;
        }
        .wrap .item{
            width: 70px;
            height: 50px;
            background: #000
            /* margin: 5px; */
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="item">1111</div>
        <div class="item">1111</div>
        <div class="item">1111</div>
        <div class="item">1111</div>
        <div class="item">1111</div>
    </div>
</body>
</html>
<script>
    //https://aqingya.cn/articl/1ec02f4f.html    博客
    
    // 一、Flex 布局是什么？
          //Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
          //注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

    //任何一个容器都可以指定为 Flex 布局
           //.box{
           //     display: flex;
           //  }
    //行内元素也可以使用 Flex 布局。
           //.box{
           //       display: inline-flex;
           //  }
    //Webkit 内核的浏览器，必须加上-webkit前缀。
           //.box{
           //         display: -webkit-flex; /* Safari */
           //         display: flex;
           //    }       

    //在父级容器上面6个属性
            // 1- flex-direction    //属性决定主轴的方向（即项目的排列方向）。
                   //row(默认值)        主轴为水平方向，起点在左端。
                   //row-reverse        主轴为水平方向，起点在右端。
                   //column            主轴为垂直方向，起点在上沿。
                   //column-reverse    主轴为垂直方向，起点在下沿。
            // 2- flex-wrap         //默认项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
                   //nowrap(默认值)     不换行。
                   //wrap               换行，第一行在上方。
                   //wrap-reverse       换行，第一行在下方
            // 3- flex-flow         //是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
                   //
            // 4- justify-content   //属性定义了项目在主轴上的对齐方式。
                   //flex-start(默认值) 左对齐
                   //flex-end           右对齐
                   //center             居中
                   //space-between      两端对齐，项目之间的间隔都相等。
                   //space-around       每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
            // 5- align-items       //属性定义项目在交叉轴上如何对齐
                   //flex-start         交叉轴的起点对齐。
                   //flex-end           交叉轴的终点对齐。
                   //center             交叉轴的中点对齐。
                   //baseline           项目的第一行文字的基线对齐。
                   //stretch(默认值)   如果项目未设置高度或设为auto，将占满整个容器的高度。

            // 6- align-content     //属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
                   //flex-start         与交叉轴的起点对齐。
                   //flex-end           与交叉轴的终点对齐。
                   //center             与交叉轴的中点对齐。
                   //space-between      与交叉轴两端对齐，轴线之间的间隔平均分布。
                   //space-around       每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
                   //stretch(默认值)    轴线占满整个交叉轴。                                   


    // 解决 父元素diplay:flex;布局下子元素width无效问题
    // (在该子元素上设置) width:30px; flex-shrink:0;

    // flex 轻松搞定水平垂直居中(未知宽高)
    //     display: flex;
    //     align-items: center;
    //     justify-content: center;

    // 适当换行
    //         flex-wrap: wrap
    //         fles:1;    子集占父级的多少份
     
    
    // 溢出省略号
    //     display: -webkit-box;
    //     overflow: hidden;
    //     -webkit-box-orient: vertical;
    //     -webkit-line-clamp: 2;   // 省略号在那一行显示  (2)
    
    
    // 改变主轴方向
    //     flex-direction: column; /*列竖着*/
    //       justify-content: space-around;
    //                        space-between;
    


        
        // flex-direction控制主副轴  
        // flex-wrap     控制换行(默认不换行)
        // flex-flow     是上两个的结合
        // justify-content主轴对齐方式
        // align-items   交叉轴对齐方式
   
        

// display: flex;
// justify-content: center;
// align-items: center;   居中 
    


// - **文本溢出显示省略号**
// - **单行**
// overflow:hidden;
// text-overflow:ellipsis;
// white-space:nowrap

// - **多行**
// overflow: hidden;
// text-overflow: ellipsis;
// display: -webkit-box;
// -webkit-line-clamp: 2;
// -webkit-box-orient: vertical;


// 段落 == 一行...
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;

// 不换行 弹性盒 
// overflow: hidden;
// text-overflow:ellipsis;
// word-break: break-all;                                
// white-space:nowrap; 
    
    
    
    
    
//一键css私有化前缀       f1 + enter 注意.css 文件讷  
//一键css生成css大树      选中html代码  shift + ctrl p  即可    

    
    
    
    
    

</script>